<template>
  <div class="page-user-profile">
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料" right-text="保存"
      @click-right="saveProfile()"
    ></van-nav-bar>
    <!-- 绘制 头像、名称、性别、生日 的单元格 -->
    <van-cell-group>
      <van-cell title="头像" is-link center @click="showPhoto=true">
        <van-image
          slot="default"
          width="50"
          height="50"
          fit="cover"
          round
          :src="userprofile.photo"
        ></van-image>
      </van-cell>
      <van-cell title="名称" is-link :value="userprofile.name" @click="showName=true"></van-cell>
      <van-cell title="性别" is-link :value="userprofile.gender===0?'男':'女'" @click="showSex=true"></van-cell>
      <van-cell title="生日" is-link :value="userprofile.birthday" @click="showBirthday=true"></van-cell>
    </van-cell-group>
    <!-- 头像弹出层
        高度不配置，通过内容自动填充 -->
    <van-popup v-model="showPhoto" position="bottom">
      <van-cell title="本地相册选择图片" is-link @click="$refs.mypic.click()"></van-cell>
      <van-cell title="拍照" is-link></van-cell>
    </van-popup>

    <!-- 隐藏状态的上传表单域 -->
    <input type="file" ref="mypic" id="pic" style="display:none;" @change="startUpload()">

    <!-- 名称弹出层
        高度不配置，通过内容自动填充 -->
        <van-popup v-model="showName" position="bottom" style="height:20%">
          <van-field v-model.trim="userprofile.name" type="text"></van-field>
        </van-popup>
    <!-- 性别弹出层(上拉菜单) -->
    <van-action-sheet v-model="showSex" :actions="sexMenus" @select="onSelect" cancel-text="取消"/>
    <van-popup v-model="showBirthday" position="bottom">
      <!-- 时间选择器 -->
      <van-datetime-picker 
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="showBirthday = false"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入dayjs（系统依赖包，自动去node_modules下边获取）
import dayjs from 'dayjs'
// 用户资料api,上传用户头像
import { apiUserProfile, apiUserPhoto, apiUserSaveProfile } from '@/api/user.js'
export default {
  name: "user-profile",
  data () {
    return {
      // 生日选择器相关成员
      showBirthday: false, // 弹出开关
      currentDate: new Date(), // 当前默认显示时间
      minDate: new Date(1900, 0, 1), // 最小选择时间限制
      maxDate: new Date(2100, 0, 1), // 最大选择时间限制
      // 给性别上拉菜单 配置选取项目，语法结构固定，name属性固定
      sexMenus: [
        { name:'男' },
        { name:'女' }
      ],
      showSex: false, // 名称菜单层显示开关
      showName: false, // 名称弹出层显示开关
      showPhoto: false, // 头像弹出层显示开关
      // 用户资料的对象成员
      userprofile: {}
    }
  },
  created () {
    this.getUserProfile()
  },
  methods: {
    // 保存用户资料
    async saveProfile () {
      // 如下api成功率是100%，不用try/catch处理
      await apiUserSaveProfile(this.userprofile)
      this.$toast.success('更新资料成功！')
    },
    
    // 开始上传头像
    async startUpload () {
      // 获得上传好的图片对象
      const fobj = this.$refs.mypic.files[0]
      // 把图片对象 整合到FormData
      const fd = new FormData()
      fd.append('photo', fobj) // photo 是接口文章要求的参数名称

      // 把FormData给到api函数，提交给服务器端
      const result = await apiUserPhoto(fd)

      // 把服务器端上传好并返回的头像信息更新显示到页面上
      // 本质给到userprofile.photo
      this.userprofile.photo = result.photo
      // 关闭弹出
      this.showPhoto = false
      // 成功提示
      this.$toast.success('头像更新成功！')
    },

    // 时间选择器，确认选择时间
    // val:就是选定好的时间
    onConfirm (val) {
      console.log(val) //  Fri Mar 10 2017 00:00:00 GMT+0800 (中国标准时间)
      console.log(typeof val) // objet
      this.userprofile.birthday = dayjs(val).format('YYYY-MM-DD')
      
      // 关闭弹出层
      this.showBirthday = false
    },

    // 性别 上拉菜单 选中项目 的回调处理
    onSelect (val) {
      console.log(val) // {name:'男'}
      // 对val进行处理，然后赋值给data表单成员(其接受数字的性别)
      this.userprofile.gender = val.name === '男'? 0 : 1

      // 隐藏菜单
      this.showSex = false
    },
    // 获得资料
    async getUserProfile () {
      // data直接接收数据
      this.userprofile = await apiUserProfile()
      // 把用户生日转为 new Date()  格式，赋值给 currentDate
      // 使得选择器 默认显示
      this.currentDate = new Date(this.userprofile.birthday)
    }
  }
};
</script>

<style scoped lang='less'></style>